iT邦幫忙

2022 iThome 鐵人賽

DAY 3
0
Modern Web

30天淺嘗主流前端設計系列 第 17

DAY17 CSS該如何處理元素位置? 3!

  • 分享至 

  • xImage
  •  

DAY17 CSS該如何處理元素位置? 3!

今天我們來說明元素進行位移的方式,除了static以外,其他的定位方式都能用以下的屬性進行位移~
也就是top(頂端),right(右端),bottom(底端),left(左端)
而設定值能夠填入長度單位或是百分比,而根據定位的方式來決定原本的位置。
我把這些屬性稱為上右下左但相反屬性哈哈哈
為什麼呢??
原因是假設你設定了一個屬性: top:15px 意思是將他從原本的位置往下15px而不是往上,因為這邊的top或是
bottom代表的也是一種起始位置的概念,所以top:15px應該翻成從頂端開始往相反方向位移15px,這也就是為
什麼我上面對他們的翻譯不是只有上右下左而是增加了端點的概念!
我先來舉個例子說明在相對定位中如何應用這些位移。
例如:https://ithelp.ithome.com.tw/upload/images/20221001/20151970WYoKcko15S.png
這是之前的例子而我為這個class是logo的圖片進行的相對定位的設置,讓他以上圖中的位置(正常順序)為起始,
以左端開始位移200px 如下圖:
https://ithelp.ithome.com.tw/upload/images/20221001/201519705yF0MoaD3p.png
而結果就會像這樣:https://ithelp.ithome.com.tw/upload/images/20221001/20151970dWEH2zIFB3.png

  今天的課程就到這邊,下一節我會舉例說明絕對定位的應用!
  
  
 

上一篇
DAY16 CSS該如何處理元素位置? 2!
下一篇
DAY18 CSS該如何處理元素位置? 4!
系列文
30天淺嘗主流前端設計30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言